// const TerserPlugin = require('terser-webpack-plugin')
const webpack = require('webpack')
const path = require('path')
// 动态插入JS文件
function resolve(dir) {
  return path.join(__dirname, dir)
}
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin')

const today = (function() {
  var d = new Date()
  var yy = d.getFullYear()
  var MM = d.getMonth() + 1 >= 10 ? (d.getMonth() + 1) : '0' + (d.getMonth() + 1)
  var DD = d.getDate() >= 10 ? d.getDate() : '0' + d.getDate()
  var hh = d.getHours() >= 10 ? d.getHours() : '0' + d.getHours()
  var mm = d.getMinutes() >= 10 ? d.getMinutes() : '0' + d.getMinutes()
  return String(yy) + String(MM) + String(DD) + String(hh) + String(mm)
})()
module.exports = {
  // map文件相当于是查看源码的一个东西。如果不需要定位问题，并
  // 且不想被看到源码，就把productionSourceMap 置为false，既可以减少包大小

  // 打包地址
  publicPath: '/app',
  // 输出地址
  outputDir: `dist/version-${today}`,
  lintOnSave: false,
  // 打包目录可以省略,默认就是dist
  assetsDir: 'static',
  productionSourceMap: false,
  // 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 publicPath 的) 目录。
  devServer: {
    // 自动打开网页
    port: 80,
    open: true
    // proxy: {
    //     // 配置代理 希望拦截当前的host地址 替换为目标地址
    //     // key: {}   ;  key为拦截的规则,可以是正则表达式
    //     // '/api': {
    //     //     target: "http://192.168.1.224",
    //     //     changeOrigin: true, // 如果是跨域 需要添加
    //     //     pathRewrite: {
    //     //         // ['/admin']: '/abc'   /admin/xx/xx ==> /abc/xx/xx
    //     //         '^/api':''
    //     //     }
    //     // },
    // },
  },

  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "./src/styles/variable";`
      }
    },
    extract: { // 打包后css文件名称添加时间戳,解决样式缓存问题
      filename: `static/css/[name].${today}.css`,
      chunkFilename: `static/css/[name].${today}.css`
    }
  },

  configureWebpack: config => {
    // 忽略已编译文件
    config.plugins.push(...(function() {
      const res = []
      const max = 2
      for (let i = 0; i < max; i++) {
        res.push(new webpack.DllReferencePlugin({
          context: process.cwd(),
          manifest: require(`./public/vendor/vendor${i}-manifest.json`)
        }))
      }
      return res
    })()
    )

    config.plugins.push(
      new AddAssetHtmlPlugin({
        // dll文件位置
        filepath: path.resolve(__dirname, './public/vendor/*.js'),
        // dll 引用路径
        publicPath: './vendor',
        // dll最终输出的目录
        outputPath: './vendor'
      })
    )
    // config.plugins.push(new HardSourceWebpackPlugin());

    if (process.env.NODE_ENV !== 'development') {
      Object.assign(config, {
        // chunkhash 代表chunk的hash,模块发生改变才会重新生成hash
        // chunkhash只能用在生产环境不能用在开发环境
        // 用于解决浏览器JS缓存问题1.0,放弃用时间戳的方式,那样会重置所有js
        output: {
          ...config.output,
          filename: `static/js/[name].[chunkhash].js`,
          chunkFilename: `static/js/[name].[chunkhash].js`
        }

      })
      config.optimization = {
        // minimizer: [
        //   // 生产环境自动删除console
        //   new TerserPlugin({
        //     cache: true, // 启用文件缓存。
        //     parallel: true, // 使用多进程并行运行可提高构建速度
        //     sourceMap: false, // 如果在生产环境中使用 source-maps，必须设置为 true
        //     terserOptions: {
        //       compress: {
        //         warnings: false,
        //         drop_console: true,
        //         drop_debugger: true,
        //         pure_funcs: ['console.log']
        //       }
        //     }
        //   })
        // ],
        // 公共代码抽离
        splitChunks: {
          cacheGroups: {
            vendor: {
              chunks: 'all',
              test: /node_modules/,
              name: 'vendor',
              minChunks: 1,
              maxInitialRequests: 5,
              minSize: 0,
              priority: 100
            },
            common: {
              chunks: 'all',
              test: /[\\/]src[\\/]js[\\/]/,
              name: 'common',
              minChunks: 2,
              maxInitialRequests: 5,
              minSize: 0,
              priority: 60
            },
            styles: {
              name: 'styles',
              test: /\.(sa|sc|c)ss$/,
              chunks: 'all',
              enforce: true
            },
            runtimeChunk: {
              name: 'manifest'
            }
          }
        }
      }
    }
  },
  chainWebpack: config => {
    // 添加别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@a', resolve('src/api'))
      .set('@v', resolve('src/views'))
      .set('@c', resolve('src/components'))
      .set('@m', resolve('src/mixins'))
      .set('@u', resolve('src/utils'))
    //  移除 prefetch 插件
    config.plugins.delete('prefetch')

    // ============压缩图片 start============
    config.module
      .rule('images')
      .use('image-webpack-loader')
      .loader('image-webpack-loader')
      .options({
        mozjpeg: { progressive: true, quality: 65 },
        optipng: { enabled: false },
        pngquant: { quality: [0.65, 0.9], speed: 4 },
        gifsicle: { interlaced: false },
        webp: { quality: 75 }
      })
      .end()
    // ============压缩图片 end============
    // set svg-sprite-loader
    config.module
      .rule('svg')
      .exclude.add(resolve('src/icons'))
      .end()
    config.module
      .rule('icons')
      .test(/\.svg$/)
      .include.add(resolve('src/icons'))
      .end()
      .use('svg-sprite-loader')
      .loader('svg-sprite-loader')
      .options({
        symbolId: 'icon-[name]'
      })
      .end()
  }
}
